<template>
    <div id="rich"></div>
  </template>
  
  <script setup>
  import { onMounted, onUnmounted } from "vue";
  import * as echarts from "echarts";
  let myRich = null;
  let myEchart = null;
  onMounted(() => {
    myRich = document.getElementById("rich");
    myEchart = echarts.init(myRich);
    let option = {
      series: [
        {   
            z: 100,
            type: 'funnel',
            sort: 'descending', // 排序方式：descending 倒序 ascending 正序
            // gap: 10, // 间距
            max: 3000, // 最大值
            min: 20,
            maxSize: '80%', // 最大占比默认是100%
            minSize: 0,  // 最小占比默认是0
            label: {
                show: false,
                position: 'inside'
            },
            itemStyle: {
                opacity: 0
            },
            data: [
                {
                    name: '进入',
                    value: 2000
                },
                {
                    name: '下单',
                    value: 80
                },
                {
                    name: '浏览商品',
                    value: 1000
                },
                {
                    name: '咨询',
                    value: 800
                }
            ]
        },
        {
            z: 200,
            type: 'funnel',
            sort: 'descending', // 排序方式：descending 倒序 ascending 正序
            // gap: 10, // 间距
            max: 3000, // 最大值
            min: 20,
            maxSize: '80%', // 最大占比默认是100%
            minSize: 0,  // 最小占比默认是0
            label: {
                show: true,
                position: 'inside'
            },
            data: [
                {
                    name: '进入',
                    value: 2000
                },
                {
                    name: '下单',
                    value: 500
                },
                {
                    name: '浏览商品',
                    value: 1500
                },
                {
                    name: '咨询',
                    value: 1000
                }
            ]
        }
      ]
    };
    myEchart.setOption(option);
  });
  onUnmounted(() => {
    myEchart.dispose(myRich);
  });
  </script>
  
  <style lang="less" scoped>
  #rich {
    width: 800px;
    height: 400px;
  }
  </style>
  